<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    /* 
     在react中组件分为两种：

     1. 函数式组件 又称无状态组件  顾名思义就是用函数定义的组件
     2. class类组件 又称有状态组件 顾名思义就是使用class类定义的组件

     有状态： 当前组件的数据 有状态就是数据发生改变可以更改视图
     无状态： 当前组件无法维护私有的数据 不可以更改视图
    */

    // （组件渲染成节点 所以要有return值） 函数式组件必须要有return值   return值必须是组件节点
    // 组件名称首字母必须大写 如果组件名称首字母小写那么在使用组件时react会讲该组件识别成标签
    // <app></app> => 标签app

    function ClickMe(){
            alert("哈哈哈哈")
        }

    function App(){
        let name = "张三";
        let list = ["张飞","关羽","赵云"]
        list.push("刘备")
        //可以写业务逻辑
        return (
            <div>
                 <h1>函数式组件定义好啦</h1>
                 <h2>{name}</h2>
                 <ol>
                    {
                        list.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                 </ol>
                 <button onClick={ClickMe}>点我一下你试试</button>
                 <Child/>
            </div>
        )
    }

    function Child(){

        return (
            <div>
                <h1>我是一个子组件</h1>
            </div>
        )
    }

    ReactDOM.render(<App />,document.getElementById("root"))
</script>
</html>